<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/index.js"></script>
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../plugins/elementui/index.css">


</head>
<body>
<div id="app">
    username:<el-input v-model="users.username" placeholder="请输入名字" style="width: 200px"></el-input>
    性别:<el-input v-model="users.gender" placeholder="请输入性别" style="width: 200px"></el-input>
    email:<el-input v-model="users.email" placeholder="请输入email" style="width: 200px"></el-input>
    <el-button @click="find">查询</el-button>
    <el-button @click="dialogVisible2=true">添加</el-button>
    <el-table :data="tableData" stripe>
        <el-table-column prop="id" label="序号"></el-table-column>
        <el-table-column prop="username" label="姓名"></el-table-column>
        <el-table-column prop="gender" label="性别"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column label="操作" align="center">
            <!--
            slot-scope：作用域插槽，可以获取表格数据
            scope：代表表格数据，可以通过scope.row来获取表格当前行数据，scope不是固定写法
            -->
            <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑
                </el-button>
                <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.pageCurrent"
            :page-sizes="[1,2,3,4,10]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
            align="center">
    </el-pagination>
    <el-dialog title="表单弹框" :visible.sync="dialogVisible" width="30%"
               :before-close="quxiao">
        <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
            <el-form-item label="名称">
                <el-input v-model="formLabelAlign.username"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-input v-model="formLabelAlign.gender"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="formLabelAlign.email"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="quxiao">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="添加弹框" :visible.sync="dialogVisible2" width="30%"
    :before-close="quxiao">
        <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
            <el-form-item label="序号">
                <el-input v-model="formLabelAlign.id"></el-input>
            </el-form-item>
            <el-form-item label="名称">
                <el-input v-model="formLabelAlign.username"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-input v-model="formLabelAlign.gender"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="formLabelAlign.email"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="quxiao">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            labelPosition: 'left',
            formLabelAlign: {},
            dialogVisible:false,
            dialogVisible2:false,
            tableData: [],
            page:{
                pageSize:10,
                pageCurrent:1,
                total:1,
            },
            users:{
                username:'',
                gender:'',
                email:'',
            }
        },
        created(){
            this.find()
        },
        methods: {

            quxiao(){
                this.dialogVisible=false
                this.dialogVisible2=false
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
                this.formLabelAlign={}
            },
            handleCurrentChange(val) {
                this.page.pageCurrent=val
                this.find()
            },
            handleSizeChange(val) {
                this.page.pageSize=val
                this.find()
            },
            handleUpdate(row) {
                this.formLabelAlign=row;
                this.dialogVisible=true
            },
            handleDelete(row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.del(row)

                    this.find()
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            add(){
                axios({
                    method: 'post',
                    url:'/users',
                    data:this.formLabelAlign
                }).then(res=>{
                    this.dialogVisible2=false
                    this.find();
                    if(res.data.flag){
                        this.$message.success(res.data.message)
                    }else{
                        this.$message.error(res.data.message)
                    }
                })
            },
            update(){
                axios({
                    method: 'put',
                    url:'/users',
                    data:this.formLabelAlign
                }).then(res=>{
                    this.dialogVisible=false
                    if(res.data.flag){
                        this.$message.success(res.data.message)
                    }else{
                        this.$message.error(res.data.message)
                    }
                })

            },
            find(){
                axios({
                    method:'post',
                    url:'/users/'+this.page.pageCurrent+'/'+this.page.pageSize,
                    data: this.users
                }).then(res=>{
                    this.tableData=res.data.data.users
                    this.page.total=res.data.data.total
                })
            },
            del(row){
                axios({
                    method: 'delete',
                    url:'/users/'+row.id
                }).then((res)=>{
                    if(res.data.flag){
                        this.$message.success(res.data.message)
                    }else{
                        this.$message.error(res.data.message)
                    }
                })
            }
        },
    });
</script>
</body>
</html>